<template>
  <div class="home">
    <transition name="delpop">
      <div class="right-hide" v-if="visibalHide == 2" v-loading="loading">
        <div class="scroll-top-green"></div>
        <div class="title-y d-between">
          <div class="left">
            <i class="el-icon-message-solid" style="color:#25b83d;"></i>
            <span>收发文</span>
          </div>
          <div class="r" @click="hideDoc = !hideDoc">
            <span>筛选条件</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>

        <div class="main-right-hide" id="document" ref="scrollTop1">
          <div class="nav">
            <transition name="opacity">
              <div class="custom-form" v-if="hideDoc">
                <el-form :model="form">
                  <el-row class="d-start" :gutter="20">
                    <el-col :span="12">
                      <el-form-item prop="date" label="时间筛选">
                        <el-date-picker
                          value-format="yyyy-MM-dd"
                          size="medium"
                          v-model="form.writing_time"
                          type="date"
                          placeholder="选择日期"
                          style="width:100%"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="project" label="项目筛选">
                        <el-select
                          size="medium"
                          v-model="form.writing_xm_id"
                          placeholder="请选择"
                          style="width:100%"
                        >
                          <el-option
                            :label="item.xmmc"
                            :value="item.id"
                            v-for="item in project"
                            :key="item.id"
                          ></el-option>
                        </el-select>
                        <!-- <el-input size="medium" v-model="form.writing_xm_id"></el-input> -->
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-row style="margin-bottom:10px;">
                  <el-col :span="24" class="d-center">
                    <span
                      class="button"
                      @click="hideDoc = false;pageDocument = 1;getdata('document')"
                    >查询</span>
                    <span
                      class="button"
                      @click="form.writing_time = null;form.writing_xm_id = null;pageDocument = 1"
                    >重置</span>
                  </el-col>
                </el-row>
              </div>
            </transition>
            <div class="blackOpacity" v-if="hideDoc" @click="hideDoc = false"></div>

            <div class="y-main">
              <div
                class="main-app"
                v-for="(item,index) in dataDocument"
                :key="item.id"
                @click="view(item,2,index)"
              >
                <div class="title d-between">
                  <span :class="{readed:item.is_read,onTop:item.is_top==2}">
                    {{item.is_top==2?'(顶)':''}}
                    {{item.subtitle}}
                  </span>
                  <sup v-if="item.is_read == 0"></sup>
                </div>
                <div class="center-app d-start">
                  <el-tooltip class="item" effect="dark" :content="item.xmmc" placement="top-start">
                    <span>{{item.xmmc}}</span>
                  </el-tooltip>
                  <p
                    v-if="item.files&&item.files.split(',').length>0"
                  >附件({{item.files.split(',').length}})</p>
                </div>
                <div class="content d-between">
                  <div class="start d-start">
                    <i class="el-icon-user-solid"></i>
                    <span v-if="item.user&&item.user">{{item.user}}</span>
                  </div>
                  <div class="date">{{item.create_time}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="noResult" v-if="!dataDocument.length">没有更多了</div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="documentTotal"
            class="d-center page"
            style="margin:10px 0"
            :current-page.sync="pageDocument"
            :page-size="documentPageSize"
            @current-change="handleCurrentChange2"
          ></el-pagination>
        </div>
      </div>

      <!-- ======================================通知公告====================================== -->
      <div class="right-hide" v-if="visibalHide == 1" v-loading="loading">
        <div class="scroll-top-blue"></div>
        <div class="title-y d-between">
          <div class="left">
            <i class="el-icon-s-comment" style="color:#238af5;"></i>
            <span style="color:#238AF5;">通知公告</span>
          </div>
          <div class="r" @click="hideNotify = !hideNotify">
            <span style="color:rgb(35, 138, 245);">筛选条件</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="main-right-hide" ref="scrollTop1">
          <div class="nav">
            <transition name="opacity">
              <div class="custom-form" v-if="hideNotify">
                <el-form :model="form">
                  <el-row class="d-start" :gutter="20">
                    <el-col :span="24">
                      <el-form-item prop="date" label="时间筛选">
                        <el-date-picker
                          value-format="yyyy-MM-dd"
                          size="medium"
                          v-model="form.notice_time"
                          type="date"
                          placeholder="选择日期"
                          style="width:100%"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-row style="margin-bottom:10px;">
                  <el-col :span="24" class="d-center">
                    <span
                      class="button"
                      @click="hideNotify = false;pageNotify = 1;getdata('notify')"
                    >查询</span>
                    <span class="button" @click="form.notice_time	 = null;pageNotify = 1">重置</span>
                  </el-col>
                </el-row>
              </div>
            </transition>
            <div class="blackOpacity" v-if="hideNotify" @click="hideNotify = false"></div>

            <div class="y-main">
              <div class="main-apps">
                <div
                  class="main-app"
                  v-for="(item,index) in dataNotify"
                  :key="item.id"
                  @click="view(item,1,index)"
                >
                  <div class="title d-between">
                    <span :class="{readed:item.is_read,onTop:item.is_top==2}">
                      {{item.is_top==2?'(顶)':''}}
                      {{item.subtitle}}
                    </span>
                    <sup v-if="item.is_read == 0"></sup>
                  </div>
                  <div class="content d-between">
                    <div class="start d-start">
                      <i class="el-icon-user-solid"></i>
                      <span v-if="item.user&&item.user">{{item.user}}</span>
                    </div>
                    <div class="date">{{item.create_time}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="noResult" v-if="!dataNotify.length">没有更多了</div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="notifyTotal"
            class="d-center"
            style="margin:10px 0"
            :current-page.sync="pageNotify"
            :page-size="notifyPageSize"
            @current-change="handleCurrentChange1"
          ></el-pagination>
        </div>
      </div>
    </transition>
    <div
      class="black"
      @click="visibalHide = 0;hideNotify = false;hideDoc = false"
      v-if="visibalHide != 0"
    ></div>
    <div class="icon-header d-center">
      <div class="notify d-start" @click="blackHide(1)">
        <div
          class="lef d-center"
          style="width: 39px;height: 100%;background: #238af5;border-radius: 4px 0px 0px 4px;color:white;"
        >
          <i class="el-icon-s-comment d-center" style="color:white;"></i>
        </div>
        <span
          style="color:#FFFFFF;font-size: 12px;font-weight: 400;width:calc(100% - 39px)"
          class="d-center"
        >通知公告</span>
        <em v-if="allnotifyReaf"></em>
      </div>
      <div class="receive d-start" @click="blackHide(2)">
        <div
          class="lef d-center"
          style="width: 39px;height: 100%;background: #25b83d;border-radius: 4px 0px 0px 4px;color:white;"
        >
          <i class="el-icon-message-solid" style="color:white;"></i>
        </div>
        <span
          style="color:#FFFFFF;font-size: 12px;font-weight: 400;width:calc(100% - 39px)"
          class="d-center"
        >收发文</span>
        <em v-if="allwriteReaf"></em>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" width="80%" top="10">
      <el-form>
          
        <h2 class="h2">
          <span v-text="content.title"></span> &nbsp;
          <small v-text="content.create_time"></small>
        </h2>
        <hr class="hr" />
        <div v-html="content.content" class="img"></div>
        <uploader
          v-if="type!=1"
          :fileslists="fileslist"
          :options="options"
          :file-status-text="statusText"
          :fileurl="this.$updata"
          class="uploader-example"
          ref="uploader"
          :app="false"
        ></uploader>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      dataNotify: [],
      dataDocument: [],
      content: {},
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      echarts1: null,
      echarts2: null,
      echarts3: null,
      echarts4: null,
      form: {},
      visibalHide: 0,
      notifyTotal: 0,
      notifyPageSize: 10,
      documentTotal: 0,
      documentPageSize: 10,
      // write: [],
      // notify: [],
      allnotifyReaf: null,
      allwriteReaf: null,
      fileslist: [],
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中"
      }, //上传
      hideDoc: false,
      hideNotify: false,
      project: [],
      pageDocument: 1,
      pageNotify: 1,
      type:null //当前弹窗详情的类型 1通知公告 2收发文
    };
  },
  mounted: function() {
    this.$get("/api/project/index?type=2", {}).then(res => {
      this.project = res.data;
    });
    this.getdata("document");
    this.getdata("notify");
    this.$Bus.$on("blackHide", item => {
      this.blackHide(item);
    });
    this.$Bus.$on("search", () => {
      this.pageDocument = 1;
      this.pageNotify = 1;
      this.getdata("document");
      this.getdata("notify");
    });
    this.$Bus.$on("is_read", (a, b) => {
      this.allnotifyReaf = a;
      this.allwriteReaf = b;
    });
    this.search();
    this.$Bus.$on("refish", () => {
      this.pageDocument = 1;
      this.pageNotify = 1;
      this.getdata("document");
      this.getdata("notify");
    });
  },
  methods: {
    search() {
      this.$get("/api/index/index", this.searchs).then(res => {
        if (res.code == 200) {
          this.allnotifyReaf = res.data.is_notice;
          this.allwriteReaf = res.data.is_writing;
        }
      });
    },
    handleCurrentChange1(value) {
      this.pageNotify = value;
      this.getdata("notify");
    },
    handleCurrentChange2(value) {
      this.pageDocument = value;
      this.getdata("document");
    },
    blackHide(item) {
      if (this.form.notice_time) this.form.notice_time = null;
      this.pageNotify = 1;
      this.pageDocument = 1;
      if (this.form.writing_time) this.form.writing_time = null;
      if (this.form.writing_xm_id) this.form.wfriting_xm_id = null;
      this.visibalHide = item;
      if (item == 1) {
        this.getdata("notify");
      }
      if (item == 2) {
        this.getdata("document");
      }
    },
    getdata(item) {
      let that = this;
      that.loading = true;

      this.form.page = item == "document" ? this.pageDocument : this.pageNotify;
      let url =
        item == "document" ? "/api/Engineer/writing" : "/api/Engineer/notice";

      this.$get(url, this.form).then(res => {
        if (res.code == 200) {
          item == "document"
            ? (that.dataDocument = res.data.list)
            : (that.dataNotify = res.data.list);
          item == "document"
            ? (that.documentTotal = res.data.total)
            : (that.notifyTotal = res.data.total);
          if (that.dataDocument && item == "document") {
            that.dataDocument.forEach(item => {
              item.subtitle = item.title;
            });
            // let arrRead = that.dataDocument.filter(item => {
            //   return item.is_read == 0;
            // });
            // if (arrRead.length > 0) {
            //   this.allwriteReaf = 0;
            // } else {
            //   this.allwriteReaf = 1;
            // }
          }

          if (that.dataNotify && item == "notify") {
            that.dataNotify.forEach(item => {
              item.subtitle = item.title;
            });
            // let arrRead = that.dataNotify.filter(item => {
            //   return item.is_read == 0;
            // });
            // if (arrRead.length > 0) {
            //   this.allnotifyReaf = 0;
            // } else {
            //   this.allnotifyReaf = 1;
            // }
          }
        }
        setTimeout(function() {
          that.loading = false;
          if (that.$refs.scrollTop1) that.$refs.scrollTop1.scrollTop = 0;
          if (that.$refs.scrollTop2) that.$refs.scrollTop2.scrollTop = 0;
        }, 300);
      });
    },
    view(item, type, index) {
      this.dialogFormVisible = true;
      this.content = item;
      this.fileslist = item.filesarr;
      // console.log(item);
      this.type=type;
      var url =
        type == 1 ? "/api/Engineer/notice_read" : "/api/Engineer/writing_read";
      if (!item["is_read"]) {
        this.$post(url, { id: item.id }).then(res => {
          if (res.code == 200) {
            item["is_read"] = 1;
            type == 1
              ? (this.dataNotify[index].is_read = 1)
              : (this.dataDocument[index].is_read = 1);

            // let arrRead1 = this.dataNotify.filter(items => {
            //   return items.is_read == 0;
            // });
            // if (arrRead1.length > 0) {
            //   this.allnotifyReaf = 0;
            // } else {
            //   this.allnotifyReaf = 1;
            // }

            // let arrRead2 = this.dataDocument.filter(items => {
            //   return items.is_read == 0;
            // });

            // if (arrRead2.length > 0) {
            //   this.allwriteReaf = 0;
            // } else {
            //   this.allwriteReaf = 1;
            // }
            // console.log(1);
            this.$Bus.$emit("searchHome");
            this.search();
          }
        });
      }
    }
  },
  computed: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.readed {
  color: #999 !important;
  font-weight: normal !important;
}
.onTop {
  color: #4bc0c0 !important;
}
.el-form-item {
  margin-bottom: 15px;
}
.y-main {
  background: white;
}
.custom-form {
  padding: 0 25px;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 10;
  background: white;
}
.blackOpacity {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.nav {
  overflow: hidden;
  // flex-shrink: 0;
}
.scroll {
  overflow-y: scroll;
}
sup {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: #f00;
  right: 0px;
  position: relative;
  border-radius: 50%;
}
.home {
  width: 100%;
  height: calc(100%);
  position: relative;

  .main {
    //   width: 100%;
    height: calc(100% - 60px);

    border: 1px solid #ebeef5;
  }
  .top-home {
    width: 100%;
    height: 204px;
    background: #ffffff;
    border-radius: 10px;

    .one {
      height: 80px;
      width: 25%;
      border-right: 1px solid #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      .title-top {
        width: 51px;
        height: 51px;
        background: #409eff;
        border-radius: 50%;
        margin-right: 10px;
        i {
          font-size: 20px;
        }
      }
      .sub-top {
        span {
          font-size: 41px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #5c6b7b;
        }
        em {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #8e99a4;
          margin-left: 10px;
        }
      }
    }
  }
  .main-center {
    width: 100%;
    height: calc(100% - 204px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .app-1 {
      width: calc(33% - 13px);
      height: calc(50% - 20px);
      background: #ffffff;
      margin-top: 20px;
      margin-right: 20px;
      border-radius: 10px;
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(3) {
        margin-right: 0;
      }
      .nav {
        width: 100%;
        height: 42px;
        // border-bottom: 1px solid #fff;
        position: relative;
        padding: 0 16px;
        overflow: hidden;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
          font-weight: 700;
          text-align: left;
          color: #409eff;
          max-width: calc(100% - 10px);
        }
        em {
          font-size: 14px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          font-style: normal;
          cursor: pointer;
        }
      }
      .main-apps {
        height: calc(100% - 42px);
        width: 100%;
        overflow-y: scroll;
        padding: 0 16px;
      }
      .main-apps-echarts {
        padding: 0 16px;
        height: calc(100% - 42px);
        width: 100%;
      }
      .main-app {
        width: 100%;
        // overflow-x: scroll;
        margin-top: 10px;
        padding: 5px;
        cursor: pointer;
        .title {
          font-size: 16px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
          font-weight: 700;
          text-align: left;
          color: #333333;
          line-height: 23px;
          position: relative;
          width: 100%;
          span {
            width: 90%;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
          }
        }
        .center-app {
          margin-top: 10px;
          width: 100%;
          span {
            padding: 4px 13px;
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: left;
            color: #8e99a4;
            background: #f1f6fb;
            border: 1px solid #cad4de;
            border-radius: 5px;
            margin-right: 10px;
            max-width: 200px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          p {
            font-style: normal;
            padding: 4px 13px;
            background: #fff8ef;
            border: 1px solid #ffebd4;
            border-radius: 5px;
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: left;
            color: #f0af64;
            max-width: 200px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
        .content {
          width: 100%;
          margin-top: 10px;
          .start {
            i {
              width: 12px;
              height: 14px;
              color: #8e99a4;
              margin-right: 5px;
            }
            span {
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #8e99a4;
            }
          }
          .date {
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: right;
            color: #8e99a4;
          }
        }
      }
    }
  }
  .right-hide {
    width: 400px;
    height: calc(100%);
    background: #ffffff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    .scroll-top-green {
      width: 100%;
      height: 5px;
      flex-shrink: 0;
      background-color: #39c250;
      background-image: -webkit-linear-gradient(
        0,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    .scroll-top-blue {
      width: 100%;
      height: 5px;
      flex-shrink: 0;
      background-color: #238af5;
      background-image: -webkit-linear-gradient(
        0,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    .title-y {
      width: 100%;
      padding: 5px 25px;
      margin-top: 15px;
      flex-shrink: 0;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
        font-weight: 700;
        text-align: left;
        color: #48d15f;
        margin-left: 10px;
      }
      .r {
        cursor: pointer;
      }
    }
    .main-right-hide {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      .y-main {
        .main-app {
          width: 100%;
          margin-top: 10px;
          padding: 15px 25px;
          border-bottom: 1px solid #eeeeee;
          cursor: pointer;
          .title {
            font-size: 16px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
            font-weight: 700;
            text-align: left;
            color: #333333;
            line-height: 23px;
            position: relative;
            width: 100%;
            span {
              width: 90%;
              line-height: 20px;
              max-height: 40px;
              overflow: hidden;
              font-size: 14px;
              overflow: hidden !important;
              text-overflow: ellipsis !important;
              white-space: nowrap !important;
            }
          }
          .center-app {
            margin-top: 10px;
            span {
              padding: 4px 13px;
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #8e99a4;
              background: #f1f6fb;
              border: 1px solid #cad4de;
              border-radius: 5px;
              margin-right: 10px;
              max-width: 200px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            p {
              font-style: normal;
              padding: 4px 13px;
              background: #fff8ef;
              border: 1px solid #ffebd4;
              border-radius: 5px;
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #f0af64;
            }
          }
          .content {
            width: 100%;
            margin-top: 10px;
            .start {
              i {
                // width: 12px;
                // height: 14px;
                color: #8e99a4;
                margin-right: 5px;
              }
              span {
                font-size: 14px;
                font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
                font-weight: 400;
                text-align: left;
                color: #8e99a4;
              }
            }
            .date {
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: right;
              color: #8e99a4;
            }
          }
        }
      }
    }
  }
  .black {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0.5;
    background: #000;
  }
}
.img {
  font-size: 14px;
  line-height: 2;
  text-indent: 2em;
}
.h2 {
  text-align: center;
  small {
    font-weight: 400;
    font-size: 12px;
  }
}
.hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px #ddd solid;
}
.img img {
  max-width: 100%;
}

.tit {
  width: 100%;
  height: 64px;
}
.icon-header {
  position: fixed;
  height: 50px;
  top: 0;
  right: 140px;
}
.notify {
  width: 115px;
  height: 35px;
  background: #409eff;
  border-radius: 4px;
  margin-right: 18px;
  position: relative;

  cursor: pointer;
  em {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: -4px;
  }
}
.receive {
  width: 115px;
  height: 35px;
  background: #48d15f;
  border-radius: 4px;
  margin-right: 18px;
  position: relative;
  cursor: pointer;
  em {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: -4px;
  }
}

.opacity-enter-active,
.opacity-leave-active {
  transition: all 0.3s ease-in-out;
}

.opacity-enter,
.opacity-leave-to {
  transform: translatey(-100%);
  opacity: 0;
}
.button {
  padding: 5px 30px;
  border-radius: 5px;
  background: #409eff;
  cursor: pointer;
  color: white;
  margin: 0 30px;
}
.page {
  width: 100%;
  background: white;
}
.noResult {
  color: #999;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>